<template>
  <div class=''>
    <div class="radar-box">
      <div class="chart" :style="{ width: width + 'px', height: height + 'px' }">
        <ResponsiveBarChart :options="chartOptions" @bar-clicked="onBarClicked" />
      </div>
    </div>
  </div>
</template>

<script>
import ResponsiveBarChart from '@/components/echarts/ResponsiveBarChart.vue';
export default {
  name: '',
  props: {
    width: {
      type: Number,
      default: 440
    },
    height: {
      type: Number,
      default: 200
    },
    dataList: {
      type: Array,
      default: () => {
        return [
          {
            "num": 0,
            "happenTime": "2024-01"
          },
          {
            "num": 10,
            "happenTime": "2024-02"
          }
        ]
      }
    }
  },
  data() {
    return {
      chartOptions: {}
    };
  },
  computed: {},
  watch: {
    dataList: {
      handler(val) {
        this.getOption()
      },
      immediate: true,
      deep: true
    }
  },
  created() {
    this.getOption()
  },
  mounted() { },
  methods: {
    onBarClicked() { },
    getOption() {
      this.chartOptions = {
        tooltip: {
          axisPointer: {
            type: 'shadow'
          },
          trigger: 'axis',
          borderWidth: 1,
          borderColor: 'rgba(143, 171, 191, 0.30)',
          backgroundColor: 'rgba(18, 24, 29, 0.90)',
          textStyle: {
            color: 'white'
          },
          padding: [8, 10],
          formatter: function (params) {
            let item = params[0];
            return (
              item.name +
              '<br/><span style="display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:rgba(48, 158, 255, 1);"></span><span style="margin-right:20px;">报警统计</span>' +
              item.value
            );
          }
        },
        grid: {
          top: 20,
          bottom: 20,
          right: 30,
        },
        xAxis: {
          axisTick: {
            show: false
          },
          boundaryGap: false,
          type: 'category',
          data: this.dataList.map(item => item.happenTime),
          axisLabel: {
            // formatter: function (params) {
            //   return params.split('年')[1];
            // },
            textStyle: {
              color: 'rgba(217, 231, 255, 1)'
            }
          }
        },
        yAxis: {
          type: 'value',
          splitLine: {
            lineStyle: {
              type: 'dotted'
            }
          },
          axisLabel: {
            textStyle: {
              color: 'rgba(217, 231, 255, 1)'
            }
          }
        },
        series: [
          {
            name: '报警统计',
            data: this.dataList.map(item => item.num),
            type: 'line',
            lineStyle: {
              color: 'rgba(48, 158, 255, 1)',
              width: 2
            },
            areaStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0,
                  color: 'rgba(48, 158, 255, 0.4)' // 0% 处的颜色
                }, {
                  offset: 1,
                  color: 'rgba(48, 158, 255, 0)' // 100% 处的颜色
                }],
                global: false // 缺省为 false
              }
            },
            itemStyle: {
              normal: {
                color: 'rgba(7, 12, 18, 1)',
                borderColor: 'rgba(48, 158, 255, 1)',
                borderWidth: 1
              },
              emphasis: {
                borderWidth: 1
              }
            },
            symbol: 'circle',
            symbolSize: 6,
            smooth: true
          }
        ]
      }
    }
  },
  components: {
    ResponsiveBarChart
  },
}
</script>

<style lang='less' scoped></style>